<template>
  <div>
    <div style="margin-bottom: 40px; background-color: #f8f8f8; padding: 30px">
      <div style="width: 60%; margin: 0 auto">
        <el-input prefix-icon="Search" clearable @keyup.enter="loadSinger" @clear="loadSinger" v-model="data.name" placeholder="请输入歌手姓名查询" style="width: 400px; height: 40px"></el-input>
      </div>
    </div>
    <div style="width: 60%; margin: 20px auto">
      <el-row :gutter="20">
        <el-col :span="5" v-for="item in data.singerData" style="margin-bottom: 40px">
          <div style="text-align: center">
            <img :src="item.avatar" alt="" style="width: 140px; height: 140px; border-radius: 50%; cursor: pointer" @click="router.push('/front/singerDetail?id=' + item.id)">
            <div style="font-size: 18px">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
      <div v-if="data.total">
        <el-pagination @current-change="loadSinger" layout="total,prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total"/>
      </div>
    </div>

  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const data = reactive({
  singerData: [],
  total: 0,
  pageNum: 1,
  pageSize: 15,
  name: null,
})

const loadSinger = () => {
  request.get('/singer/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.name,
    }
  }).then(res => {
    if (res.code === '200') {
      data.singerData = res.data?.list
      data.total = res.data?.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
loadSinger()

const reset = () => {
  data.name = null
  data.singerName = null
  loadSinger()
}
</script>
<style>
.el-col-5 {
  width: 20%;
  max-width: 20%;
}
</style>